import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Button, Divider, Modal, Upload, message } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import TableList from '@/components/TableList';
import FilterSearch from '@/components/FilterSearch';
import EditModal from '@/components/EditModal';
import Download from '@/components/Download';
const { confirm } = Modal;
type Props = {
  dispatch?: Function;
};

const uploadOpt = {
  name: 'file',
  action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
  headers: {
    authorization: 'authorization-text',
  },
};
@connect(({ user }: any) => ({ user }))
class Manager<Props> extends PureComponent {
  state = {
    loading: false,
    showEdit: false,
    userDetail: {
      name: 'Caroline',
    },
  };
  table = { fetch: () => {} };
  modal = { show: () => {} };
  modalShow = () => {};
  filters = [
    {
      key: 'name',
      type: 'input',
      label: '单位名称',
      config: [
        {
          max: 50,
          message: '不能超过50个字符',
        },
      ],
      placeholder: '请输入单位名称',
    },
  ];

  editFilters = [
    {
      key: 'name',
      type: 'input',
      label: '单位名称',
      rules: [
        {
          required: true,
        },
      ],
      placeholder: '请输入单位名称',
    },
    {
      key: 'sort',
      type: 'inputnumber',
      label: '排序',
    },
  ];

  columns = [
    { title: '单位ID', dataIndex: 'id' },
    { title: '单位名称', dataIndex: 'name' },
    { title: '排序', dataIndex: 'sort' },
    {
      title: '操作',
      dataIndex: 'action', // 状态：是否锁定0：未锁定1：已锁定
      width: 325,
      render: (text: any, data: object) => (
        <span key={text}>
          <Button onClick={() => this.resetPassword(data)}>重置密码</Button>
          <Divider type="vertical" />
          <Button onClick={() => this.goDetail(data)}>编辑</Button>
          <Divider type="vertical" />
          <Button onClick={() => this.delete(data)}>删除</Button>
        </span>
      ),
    },
  ];
  /**
   * 重置密码
   */
  resetPassword(data) {
    confirm({
      content: '是否确认重置密码？',
      okText: '确认',
      cancelText: '取消',
      onOk: () => {
        console.log('确认重置');
        this.props
          .dispatch({
            type: '$request/post',
            payload: {
              url: '/api/structure/v1/resetPassword',
              data: data,
            },
          })
          .then(res => {
            message.success('重置成功');
          });
      },
    });
  }
  /**
   * 删除用户
   * @param data
   */
  delete(data) {
    this.props
      .dispatch({
        type: 'base/delete',
        payload: {
          url: '/api/structure/v1/deleteOrgUnit',
          type: '该单位',
          data,
        },
      })
      .then(() => {
        this.table.fetch();
      });
  }
  /**
   * 用户信息编辑
   * @param data
   */
  goDetail = (data: any) => {
    this.modalShow(data);
  };

  render() {
    const { showEdit, userDetail } = this.state;
    return (
      <>
        <FilterSearch
          filters={this.filters}
          onSearch={(val: any) => this.table.fetch(val)}
        >
          <Button onClick={() => this.modalShow()} type="primary">
            添加
          </Button>
          <Upload {...uploadOpt}>
            <Button icon={<UploadOutlined />}>导入</Button>
          </Upload>
          <Download
            url="/api/structure/v1/downloadTemplate"
            filename="单位管理模版.xlsx"
          >
            模版下载
          </Download>
        </FilterSearch>
        <TableList
          post
          rowKey="id"
          onRef={c => {
            this.table = c;
          }}
          columns={this.columns}
          source="/api/structure/v1/queryOrgUnit"
        />
        <EditModal
          title="单位管理"
          filters={this.editFilters}
          onShow={(v: any) => (this.modalShow = v)}
          onSave={() => this.table.fetch()}
          createUrl="/api/structure/v1/createOrgUnit"
          updateUrl="/api/structure/v1/updateOrgUnit"
        />
      </>
    );
  }
}

export default Manager;
